<template>
  <view class="main" style="padding-top: var(--status-bar-height)">
    <view class="mask"></view>
    <scroll-view
      class="scroll"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      refresher-background="#F6F7FB"
      @refresherrefresh="reload"
      @scrolltolower="loadMore"
      :show-scrollbar="false"
    >
      <view class="scroll_top">
        <!-- 搜索 -->
        <view class="top_search">
          <u-search
            placeholder="随问随答"
            bgColor="#fff"
            borderColor="#F1F1F1"
            :showAction="false"
            @click="jumpSearch()"
            :disabled="true"
          ></u-search>
        </view>

        <!-- tips -->
        <view class="tip">
          <view
            class="tip_item"
            v-for="(item, index) in tipList"
            :key="index"
          >
            <image
              src="/static/img/exchange/right_icon.png"
              class="tip_img"
            ></image>
            <text class="tip_text">{{ item.name }}</text>
          </view>
        </view>

        <!-- 功能 -->
        <view class="top_nav">
          <view class="nav_left" @click="toQuickAsk">
            <view class="nav_title">
              <text class="nav_topTitle">立即提问</text>
              <text class="nav_bottomTitle">立即提问 快速解答</text>
            </view>
          </view>
          <view class="nav_right">
            <view class="top right_item">
              <view class="nav_title" @click="goExpertList">
                <text class="nav_topTitle">问专家</text>
                <text class="nav_bottomTitle">专业人士 快速解答</text>
              </view>
            </view>
            <view class="bottom right_item" @click="goMyAskAnswers">
              <view class="nav_title">
                <text class="nav_topTitle">我的问答</text>
                <text class="nav_bottomTitle">查看过往问答</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 老师列表 -->
      <view class="teacher">
        <view class="flex_between">
          <text class="fz36 c333 bold">专家回答</text>
          <view class="fz24 c999 flex_align" @click="goExpertList">
            更多
            <u-icon name="arrow-right" size="24rpx"></u-icon>
          </view>
        </view>
        <view class="teacher_list">
          <view
            class="teacher_item"
            v-for="(item, index) in teacherList.slice(0, 2)"
            :key="index"
          >
            <image
              class="avatar"
              :src="item.userinfo.avatar"
              mode="aspectFill"
              @click="goHome(item)"
            ></image>
            <view class="teacher_info">
              <view class="teacher_nickname ellipsis1">{{
                item.userinfo.nickname
              }}</view>
              <view class="ellipsis1 teacher_tags">{{
                item.userinfo.major_direction
              }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 主体部分 -->
      <view class="main_body">
        <!-- 导航栏部分 -->
        <view class="main_nav">
          <u-badge
            :absolute="true"
            :offset="[8, 35]"
            :value="$store.state.inviteValue"
            numberType="overflow"
            max="99"
          ></u-badge>
          <u-tabs
            :list="tabList"
            @click="menuClick"
            :current="current"
            :scrollable="false"
            :activeStyle="activeStyle"
            :inactiveStyle="inactiveStyle"
            :itemStyle="{ height: '104rpx' }"
          ></u-tabs>
        </view>
        <!-- 精选回答 -->
        <view v-if="askShow" class="ask">
          <template v-if="tagsList.length > 0">
            <view class="ask_type">
              <view
                class="tags"
                v-for="(item, i) in tagsList"
                :key="i"
                :class="{ active: item.type == query.sort }"
                @click="clickTags(item)"
              >
                {{ item.name }}
              </view>
            </view>
            <view
              v-for="(item, index) in askList"
              :key="index"
              class="ask_item"
              @click="toDetail(item)"
            >
              <view class="ask_line"></view>
              <view class="ask_title">
                {{ item.title }}
              </view>
              <view class="ask_session">
                <view class="ask_session_title">
                  <u-avatar
                    :src="item.avatar"
                    :size="20"
                    mode="aspectFill"
                  ></u-avatar>
                  <view class="ask_session_name">
                    {{ item.nickname }}
                  </view>
                </view>
                <view class="ask_session_content" v-if="item.answer">
                  <text v-if="item.answer.extendedData.type == 1">
                    {{ item.answer.message }}
                  </text>
                  <text v-if="item.answer.extendedData.type == 11">[图片]</text>
                </view>
              </view>
              <view class="ask_view">
                <view class="ask_view_time">
                  {{ item.add_time_text }}
                </view>
                <view class="ask_view_time">{{ item.page_view }}浏览</view>
              </view>
            </view>
            <uni-load-more :status="listStatus"></uni-load-more>
          </template>
          <template v-else>
            <view>
              <u-empty
                text="暂无热门问题"
                icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
              ></u-empty>
              <view class="ask_btn flex_center_align" @click="toQuickAsk"
                >去提问</view
              >
            </view>
          </template>
        </view>
        <!-- 等你来答 -->
        <view v-if="!askShow" class="answer">
          <template v-if="answerList.length > 0">
            <view
              class="answer_item"
              v-for="(item, index) in answerList"
              :key="index"
            >
              <view class="answer_icon">
                <image
                  src="/static/img/exchange/answer_icon.png"
                  class="answer_img"
                ></image>
                <text class="answer_text">成为首答者</text>
              </view>
              <view class="answer_title">
                {{ item.title }}
              </view>
              <view class="answer_bottom">
                <view class="answer_bottom_time">
                  {{ item.add_time_text }}
                </view>
                <view class="answer_bottom_status">
                  <image
                    v-if="item.status == 1"
                    src="/static/img/exchange/write_answer.png"
                    class="answer_bottom_img"
                  >
                  </image>
                  <text
                    v-if="item.status == 1 && item.ans_uid != userInfo.id"
                    class="answer_bottom_text"
                    @click="toAnswer(item)"
                    >写回答</text
                  >
                  <text
                    v-if="item.status == 1 && item.ans_uid == userInfo.id"
                    class="answer_bottom_text"
                    style="color: #ff6161"
                    @click="toAnswer(item)"
                  >
                    你的问题
                  </text>
                  <text v-if="item.status == 2" class="answer_bottom_text1"
                    >沟通中···</text
                  >
                </view>
              </view>
            </view>
            <uni-load-more :status="listStatus"></uni-load-more>
          </template>

          <view v-else>
            <u-empty
              text="暂无热门问题"
              icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
            ></u-empty>
            <view class="ask_btn flex_center_align" @click="toQuickAsk"
              >去提问</view
            >
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../quiz/index/index"
></script>

<style lang="scss" scoped>
@import "index.scss";
</style>
